<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="node_modules/vue/dist/vue.js"></script>
  #app
  <style>
      .active{
          color: green;
      }
      .delete{
          background: red;
      }
      .error{
          font-size: 30px;
      }
  </style>

</head>
<body>
  <div id="app">
    <h2>Class绑定，v-bind:class 或者 :class</h2>
<!--      activeClass会从data中获取值为active-->
      <p v-bind:class="activeClass">字符串样式</p>
<!--      isDelete为true，渲染delete样式，当hasError为false，不用error样式-->
      <p :class="{delete:isDelete,error:hasError}">对象表达式</p>
<!--    渲染active和error样式，注意要加上单引号，不谈获取的是data中的值-->
    <p :class="['active','error']">数组表达式</p>

    <h2>Style绑定 v-bind:style 或者 :style</h2>
    <p :style="{color:activeColor,fontSize:fontSize}">Style绑定</p>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        activeClass: "active",
        isDelete: true,
        hasError: false,
        // 演示Style绑定
        activeColor: 'red',
        fontSize: '50px'
      }
    })
  </script>

</body>
</html>